<template>
  <div class="statistics-content statistics-2">
    <div class="count-block">
      <div class="count-item" @click="oncloseDialog3(2)">
        <div class="count"> {{ count.enterpriseCount }} </div>
        <!--        <div class="count">{{ count.enterpriseCount }}</div>-->
        <div class="text">注册企业</div>
      </div>
      <Cover v-if="closeDialog1" :id="fatherId" :closeDialog1="close" :type="fairActive" :name="name"></Cover>
      <!--   企业组件   -->
      <CoverCom v-if="closeDialog3" :id="fatherId" :closeDialog3="close3" :type="fairActive" :title="title"></CoverCom>
      <!--    岗位  -->
      <CoverJob v-if="closeDialog2" :id="fatherId" :closeDialog2="close2" :type="fairActive" :title="title"></CoverJob>
      <div class="count-item" @click="oncloseDialog2(3)">
        <!--        <div class="count">{{  count.suzhouCount.jobPassCount+ count.jintaCount.jobPassCount+ count.dunhuangCount.jobPassCount+ count.yumenCount.jobPassCount+ count.guazhouCount.jobPassCount+ count.subeiCount.jobPassCount+ count.akesaiCount.jobPassCount}}</div>-->
        <div class="count">{{ count.jobCount }}</div>
        <div class="text">在招岗位</div>
      </div>
      <div class="count-item" @click="oncloseDialog2(4)">
        <!--        <div class="count">{{ count.jobCount }}</div>-->
        <div class="count">{{ count.jobCount }}</div>
        <div class="text">全部岗位</div>
      </div>
      <div class="count-item" @click="oncloseDialog1(5)">
        <!--        <div class="count">{{ count.customerCount }}</div>-->
        <div class="count">{{ count.customerCount }}</div>
        <div class="text">注册人数</div>
      </div>
      <div class="count-item" @click="oncloseDialog1(6)">
        <!--        <div class="count">{{ count.delivererCount }}</div>-->
        <div class="count">{{ count.delivererCount }}</div>
        <div class="text">简历投递人</div>
      </div>
      <div class="count-item">
        <!--        <div class="count">{{ count.mateCount }}</div>-->
        <div class="count">{{ count.deliveryCount }}</div>
        <div class="text">简历投递量</div>
      </div>
    </div>
    <div class="statistics-block salary-block full">
      <BlockItem class="max" title="行业供求薪资分布"></BlockItem>
      <div class="chart" id="chart3"></div>
    </div>
    <div class="statistics-block unit-rank-block">
      <div class="rank-list-content">
        <div style="display:flex; justify-content: space-between;align-items: center;">
          <BlockItem class="max" style="padding-left: 10px;width: 50%;line-height: 35px;" title="热度排行top20"></BlockItem>
          <div class="tab-block2">
            <div :class="chart1Active === 1 ? 'active' : ''" @click="chartBind(1)" class="tab">热门企业</div>
            <div :class="chart1Active === 2 ? 'active' : ''" @click="chartBind(2)" class="tab">热门岗位</div>
            <div :class="chart1Active === 3 ? 'active' : ''" @click="chartBind(3)" class="tab">就业成功企业</div>
          </div>
        </div>
        <div class="rank-block">
          <div class="rank-item head">
            <div class="col-item rank">排名</div>
            <div class="col-item name">公司名称</div>
            <div class="col-item count">数量</div>

          </div>
          <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
            <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
              <div id="scrollItemBox" v-if="chart1Active === 1">
                <div v-for="(item, index) in unitRank" :key="item.id">
                  <div class="rank-item body" :style="index % 2 == 0 ? 'background-color: #16205F' : ''">
                    <div class="col-item rank">{{ index + 1 }}</div>
                    <!--                      <div class="col-item rank">01</div>-->
                    <div class="col-item name">{{ item.name }}</div>
                    <div class="col-item count">{{ item.value }}</div>
                  </div>
                </div>
              </div>


              <div id="scrollItemBox" v-if="chart1Active === 2">
                <div v-for="(item, index) in unitRank1" :key="item.id">
                  <div class="rank-item body" :style="index % 2 == 0 ? 'background-color: #16205F' : ''">
                    <div class="col-item rank">{{ index + 1 }}</div>
                    <!--                      <div class="col-item rank">01</div>-->
                    <div class="col-item name">{{ item.name }}</div>
                    <div class="col-item count">{{ item.value }}</div>
                  </div>
                </div>
              </div>


                <div id="scrollItemBox" v-if="chart1Active === 3">
                  <div v-for="(item, index) in unitRank2" :key="item.id">
                    <div class="rank-item body" :style="index % 2 == 0 ? 'background-color: #16205F' : ''">
                      <div class="col-item rank">{{ index + 1 }}</div>
                      <div class="col-item name">{{ item.name }}</div>
                      <div class="col-item count">{{ item.value }}</div>
                    </div>
                  </div>
                </div>
                <div v-html="copyHtml"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="statistics-block education-block">
        <BlockItem class="max" title="求职者学历分布"></BlockItem>
        <div id="education" class="chart"></div>
      </div>
      <div class="statistics-block age-block">
        <BlockItem class="max" title="求职者年龄分布"></BlockItem>
        <div id="age" class="chart"></div>
      </div>
      <div class="statistics-block full-part-block">
        <BlockItem class="max" title="求职者性别分布"></BlockItem>
        <div id="full-part" class="chart"></div>
      </div>
    </div>
</template>

<script>
import {getEducationPie, getEmployersList, getSelectCount,agePie,jobTypePie} from "@/api/statistics-3";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import Cover from "@/components/Cover/Cover.vue";
import CoverCom from "@/components/Cover/CoverCom.vue";
import CoverJob from "@/components/Cover/CoverJob.vue";
import {employmentRankingApi} from "@/api/statistics-2";
import {employersApi, getAllIndexCountApi, getPostSalaryAveApi} from "@/api/statistics-10";

export default {
  name: "Statistics10",
  components: {
    BlockItem,
    CoverCom,
    CoverJob,
    Cover
  },
  data() {
    return {
      timer: null,
      fairActive: 1,
      type: 1,
      name: '',
      title: '',
      closeDialog: false,
      closeDialog1: false,
      closeDialog3: false,
      closeDialog2: false,
      fatherId: 0,
      count: {
        mateCount: 0,
        enterpriseCount: 0,
        jobCount: 0,
        jobPassCount: 0,
        customerCount: 0,
        delivererCount: 0,
        deliveryCount: 0,
        suzhouCount: {
          jobPassCount: 0
        },
        jintaCount: {
          jobPassCount: 0
        },
        dunhuangCount: {
          jobPassCount: 0
        },
        yumenCount: {
          jobPassCount: 0
        },
        guazhouCount: {
          jobPassCount: 0
        },
        subeiCount: {
          jobPassCount: 0
        },
        akesaiCount: {
          jobPassCount: 0
        }
      },
      chart1Active: 1,
      unitRank: [
        {
          name: "酒泉恒瑞新石英材料有限公司",
          value: 69
        },
        {
          name: "甘肃圣锦元生物科技有限公司",
          value: 51
        },
        {
          name: "甘肃松盛医药有限公司",
          value: 42
        },
        {
          name: "瓜州县强力商砼有限公司",
          value: 30
        },
        {
          name: "瓜州县伟莹建材有限公司",
          value: 20
        },
        {
          name: "甘肃三新硅业有限公司",
          value: 20
        },
      ],
      unitRank1: [
        {
          name: "发酵技术员",
          value: 69
        },
        {
          name: "土建预算员",
          value: 51
        },
        {
          name: "销售顾问",
          value: 42
        },
        {
          name: "客户经理",
          value: 30
        },
        {
          name: "出纳行政",
          value: 20
        },
        {
          name: "网销主管",
          value: 20
        },
      ],
      unitRank2: [
        {
          name: "定西新众创人力资源有限公司",
          value: 85
        },
        {
          name: "定西弘盛物业服务有限责任公司",
          value: 73
        },
        {
          name: "定西中元车辆服务有限责任公司",
          value: 65
        },
        {
          name: "甘肃九州一家房地产经纪有限公司",
          value: 54
        },
        {
          name: "定西灏安堂医药有限公司",
          value: 52
        },
        {
          name: "定西蓝柏玻璃科技有限公司",
          value: 37
        },
      ],
      copyHtml: '', //复制多一份防止滚动到后面出现空白
      scrollTop: 0, //列表滚动高度
    }
  },
  methods: {
    oncloseDialog3(e) {
      this.closeDialog3 = true
      this.fatherId = e
      this.title = '注册企业'
    },
    oncloseDialog1(e) {
      this.closeDialog1 = true
      this.fatherId = e
      this.fairActive = e
      this.type = e
    },
    oncloseDialog2(e) {
      this.closeDialog2 = true
      this.fatherId = e
      this.fairActive = e
      if (this.fairActive == 3) {
        this.title = '在招岗位'
      }
      if (this.fairActive == 4) {
        this.title = '全部岗位'
      }
    },


    close3() {
      this.closeDialog3 = false
    },
    close2() {
      this.closeDialog2 = false
    },
    close() {
      this.closeDialog1 = false
    },
    // oncloseDialog(e)
    // {
    //   this.closeDialog3 = true
    //   this.closeDialog2 = true
    //   this.closeDialog1 = true
    //   this.closeDialog = true
    //   this.fatherId = e
    //   this.fairActive = e
    // },
    initScroll() {
      this.$nextTick(() => {
        this.startScroll()
      })
    },
    // 鼠标移入停止滚动
    mEnter() {
      clearInterval(this.timer);
    },
    // 鼠标移出继续滚动
    mLeave() {
      this.startScroll()
    },
    // 开始滚动
    startScroll() {
      this.timer = setInterval(this.scroll, 35);
    },
    // 滚动处理方法
    scroll() {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
    initChart3() {
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      let data = ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'];
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 10,
          left: 50,
          right: 10,
          bottom: '32%'
        },
        legend: {
          data: ['行业岗位平均薪资', '行业求职期望平均薪资'],
          right: 10,
          top: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          data: data,
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: '#fff',
              fontSize: '11',
            },
            formatter: function (value) {
              var ret = '';
              var maxLength = 6;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          name: '单位：人/课',
          minInterval: 1000,
          min: 0,
          nameTextStyle: {
            color: '#fff',
            fontSize: 14
          },
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: false,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 6,
          },
        ],
        series: [{
          type: 'bar',
          name: '行业需求',
          data: [134, 242, 245, 365, 456, 735, 435, 354, 456, 354, 654, 527, 120, 540, 400, 575, 435, 314, 456, 354],
          label: {
            show: true,
            position: 'top',
            color: '#fff'
          },
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: [15, 15, 15, 15],
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#2196FE'
              }, {
                offset: 1,
                color: '#03CEF6'
              }])
            }
          }
        },
        {
          type: 'bar',
          name: '行业供给',
          data: [134, 242, 245, 365, 456, 735, 435, 354, 4, 42, 654, 527, 42, 52, 400, 575, 348, 24, 43, 421],
          label: {
            show: true,
            position: 'top',
            color: '#fff'
          },
          barWidth: 10,
          barCategoryGap: '30%',
          barGap: '120%',
          itemStyle: {
            normal: {
              barBorderRadius: [15, 15, 15, 15],
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#46E6A2'
              }, {
                offset: 1,
                color: '#F4F783'
              }])
            }
          }
        },
        ]
      };
      getPostSalaryAveApi().then((res)=>{
        if(res.code===200){
          const data=res.data
          option.xAxis.data = []
          option.series[0].data = []
          option.series[1].data = []
          for (let i = 0; i < data.length; i++) {
            option.xAxis.data.push(data[i].name)
            option.series[0].data.push(data[i].publishSalary);
            option.series[1].data.push(data[i].intentionSalary);
          }

      // myCharts.setOption(option)

      setInterval(() => {
        if (option.dataZoom[0].endValue == data.length - 1) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue =
              option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue =
              option.dataZoom[0].startValue + 1
        }
        myCharts.hideLoading();
        myCharts.setOption(option)
      }, 3000);
      }
      })
    },
    getCount() {
      getSelectCount().then((res) => {
        if (res.code === 200) {
          this.count = res.data
        }
      })
    },
    chartBind(e) {
      this.chart1Active = e
      this.scrollTop = 0
      // this.getList()
    },
    getList() {
      getEmployersList({ type: this.chart1Active }).then((res) => {
        if (res.code === 200) {
          this.unitRank = res.data
          this.$nextTick(() => {
            this.copyHtml = document.getElementById("scrollItemBox").innerHTML
          })


        }
      })
    },
    initSalary() {
      let myCharts = this.$echarts.init(document.getElementById('salary'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '行业供求薪资分布',
          top: 15,
          left: 'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '0',
          bottom: '20%',
        },
        xAxis: {
          data: ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            rotate: 50,
            formatter: function (value) {
              var ret = '';
              var maxLength = 5;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        color: ['#2E69D5', '#CABC7F'],
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: true,
            xAxisIndex: 0,
            start: 0,
            end: 50,
          },
        ],
        series: [{
          name: '平均期望薪资',
          type: 'line',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],//y轴数据
        }, {
          name: '平均岗位薪资',
          type: 'line',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],//y轴数据
        },]
      }
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initEducation() {
      let myCharts = this.$echarts.init(document.getElementById('education'));
      myCharts.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: true,
            xAxisIndex: 0,
            start: 0,
            end: 50,
          },
        ],
        series: [
          {
            name: '求职者学历分布',
            type: 'pie',
            radius: ['0%', '60%'],
            center: ['50%', '40%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 1,
              normal: {
                label: {
                  color: '#fff'
                }
              }
            },
            data: [2, 5, 17, 33, 67, 75]
          }
        ]
      };
      getEducationPie().then((res) => {
        if (res.code === 200) {
          const data = res.data
          option.series[0].data = data;
          myCharts.hideLoading()
          myCharts.setOption(option);
        }
      })
    },
    initAge() {
      let myCharts = this.$echarts.init(document.getElementById('age'));
      myCharts.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '劳动力年龄分布',
            type: 'pie',
            radius: ['0%', '60%'],
            center: ['50%', '40%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 1,
              normal: {
                label: {
                  color: '#fff'
                }
              }
            },
            data: [{
              name: '16-25',
              value: 27
            }, {
              name: '25-35',
              value: 67
            }, {
              name: '35-45',
              value: 50
            }, {
              name: '45-55',
              value: 34
            }, {
              name: '55以上',
              value: 18
            },]
          }
        ]
      };
      myCharts.hideLoading()
      agePie().then((res)=>{
        if(res.code===200) {
          const data = res.data
          option.series[0].data = data;
          myCharts.setOption(option);
        }})


      // }
      // })
    },
    initFullPart() {
      let myCharts = this.$echarts.init(document.getElementById('full-part'));
      myCharts.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#E66D72', '#4EB2ED'],
        legend: {
          top: '15%',
          right: 0,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '40%'],
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              show: true,
            },
            data: [{
              name: '男',
              value: 78
            }, {
              name: '女',
              value: 67
            },]
          }
        ]
      };
      myCharts.hideLoading()
      jobTypePie().then((res)=>{
        if(res.code===200) {
          const data = res.data
          option.series[0].data = data;
          myCharts.setOption(option);
        }})


      // }
      // })
    },
    //数据统计
    getAllIndexCount(){
      getAllIndexCountApi().then((res) => {
        if (res.code === 200) {
          this.count = res.data
        }
      }).finally(()=>{
      })
    },
    //热度排行top20
    employers(){
      this.listLoading = true
      employersApi().then((res) => {
        this.list = res.data
      }).finally(()=>{
        this.listLoading = false
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  mounted: function () {
    this.initChart3()
    this.initEducation();
    this.initAge();
    this.initFullPart();
    // this.getCount()
    // this.getList()
    this.initScroll()
    //数据统计
    this.getAllIndexCount()
    //各乡镇、街道就业排行
    this.employers()
  },
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;

.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  height: calc(100% - 125px);
  padding: 15px;
  margin-top: 8px;

  .rank-list-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .rank-title {
      margin-top: 15px;
      width: 100%;
      color: #23ffff;
      font-size: 17px;
      text-align: center;
      font-weight: bold;
    }

    .tab-block2 {
      display: flex;
      align-items: center;

      .tab {
        color: #ffffff;
        font-size: 14px;
        background: #123178;
        cursor: pointer;
        padding: 5px 6px;
        border-radius: 4px;
      }

      .tab.active {
        background-image: linear-gradient(to right, #2295FF, #02CEF6);
      }
    }

    .rank-block {
      display: flex;
      flex-direction: column;
      padding-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .rank-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;

        .col-item {
          display: flex;
          align-items: center;
          color: #fff;
          padding: 0 5px;
        }

        .col-item.rank {
          width: 50px;
          justify-content: center;
        }

        .col-item.name {
          width: calc(100% - 150px);
          margin-left: 20px;
          justify-content: flex-start;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .col-item.count {
          width: 100px;
          justify-content: center;
          font-size: 14px;
        }
      }

      .rank-item.head {
        height: 45px;
        /* margin-bottom: 5px; */
        background-color: #232C67;

        .col-item {
          justify-content: center;
          font-size: 16px;
        }

        .col-item.name {
          justify-content: flex-start;
        }
      }

      .rank-item.body {
        height: 45px;
        margin-bottom: 10px;

        .col-item.rank.background {
          background: #F36838;
          margin: 0 12.5px;
          width: 25px;
          height: 25px;
          border-radius: 4px;
          font-size: 14px;
        }
      }

      .rank-item.body:last-child {
        margin-bottom: 0;
      }
    }
  }

  .count-block {
    width: 100%;
    height: 110px;
    border: 2px solid #05548A;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
    background-color: #0A1456;

    .count-item {
      width: calc((100% - 5px)/6);
      height: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: $border;
      cursor: pointer;

      .count {
        color: #50FFC1;
        font-size: 40px;
        font-weight: bold;
      }

      .text {
        font-size: 16px;
        color: #fff;
      }
    }

    .count-item:last-child {
      border: none;
    }
  }

  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
  }
}

.statistics-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .statistics-block {
    height: calc((100% - 150px)/2);
    width: calc((100% - 20px) / 3);
    position: relative;
    border: 2px solid #05548A;
    margin-top: 20px;
    background-color: #0A1456;
    border-radius: 10px;
  }

  .statistics-block.salary-block,
  .statistics-block.education-block,
  .statistics-block.age-block {

    margin-right: 20px;
  }

  .education-block,
  .age-block {
    width: calc((100% - 20px)/3 - 10px);
  }

  .full-part-block {
    width: calc((100% - 20px)/3);
  }

  .statistics-block.full {
    width: calc((100% - 20px) / 3 * 2);
  }
}</style>
<style lang="scss" scoped>.scroll_parent_box {
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}

.scroll_list {
  overflow: hidden;
  transition: all 0ms ease-in 0s
}

.scroll_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}</style>

